<template>
  <CellGroup title="订单信息">
    <ul class="oder-info-container">
      <li v-for="(value, key) of order" :key="key"
        class="oder-info">
        <span
          class="key">{{ OrderDetailInfoMap[key] }}</span>
        <span class="value">{{ value }}</span>
      </li>
      <li class="oder-info">
        <span
          class="key" style="margin-left: auto;">{{ '共计' + totalCount + '张' }}</span>
      </li>
    </ul>
  </CellGroup>
</template>
<script setup lang="ts">
import { CellGroup } from 'vant';
import type { PropType } from 'vue';

import { OrderDetailInfoMap } from '../const';
import type { CardOrderDetailItem } from '../models/CardOrderItem';

defineProps({
  order: {
    type: Object as PropType<CardOrderDetailItem['cardInfo']>,
    default: () => ({}),
  },
  totalCount: {
    type: Number,
    default: 0,
  },
});
</script>
<style lang="less" scoped>
.oder-info-container {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 8px 16px;

  .oder-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 14px;

    .key {
      color: var(--van-cell-value-color);
    }
  }
}
</style>
